<template>
  <div>
    <el-dialog
        :title="title"
        :visible="true"
        :show-close="false"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        width="90%">
      <div class="content">
        <el-row type="flex" v-for="(item, index) in landReceiptArr" :key="index">
          <el-col class="weight" :span="!item.span ? 6 : item.span.nameSpan">{{ $t(item.name) }}：</el-col>
          <el-col class="lh" :span="!item.span ? 18 : item.span.keySpan">{{ handleShowText(item.key, item) }}</el-col>
        </el-row>
        <!-- 折叠面板 -->
        <div class="content-center">
          <el-collapse v-model="activeNames" accordion v-for="(item, index) in signObj.innerGoodsInfoEntityList" :key="index">
            <!-- 件号 -->
            <el-collapse-item :title="$t('cTransportSearch.partNum') + '  ' + item.partNum" @click.native="handleOpen(item.id)" :name="index">
              <div v-if="partNumObj">
                <el-row type="flex" v-for="(item2, index2) in partNumArr" :key="index2">
                  <el-col :span="12">
                    <span>
                      {{ $t(item2.name1) }}：
                      {{ item2.check ? item2.check(partNumObj[item2.key1], item2.key1, partNumObj) : partNumObj[item2.key1] }}
                    </span>
                  </el-col>
                  <el-col :span="12">
                    <span>
                      {{ $t(item2.name2) }}：
                      {{ item2.check ? item2.check(partNumObj[item2.key2], item2.key2, partNumObj) : partNumObj[item2.key2] }}
                    </span>
                  </el-col>
                </el-row>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="bottomBtn">
        <el-button plain @click="handleCancel">{{$t('btn.cancelSign')}}</el-button>
        <el-button type="primary" plain @click="handleOk">{{$t('btn.okSign')}}</el-button>
      </div>
    </el-dialog>
    <sign-ok v-if="signFlag" :signObj="signObj" @handleClose="handleClose" />
  </div>
</template>
<script>
import { landReceiptArr, partNumArr } from '../../../../assets/js/common'
import signOk from './signOk'
import {$landSign} from "../../../../api/transport";

export default {
  props: {
    signObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      title: '申请批次号:',
      landReceiptArr: Object.freeze(landReceiptArr),
      partNumArr: Object.freeze(partNumArr),
      activeNames: '1',
      signFlag: false,
      partNumObj: {}
    }
  },
  components: {
    signOk
  },
  methods: {
    handleClose(flag) {
      this.signFlag = false
      if (flag) this.handleCancel()
    },
    handleCancel() {
      this.$emit('handleCancel')
    },
    handleOk() {
      this.signFlag = true
    },
    // 打开
    handleOpen(id) {
      $landSign
        .getCargoInfo({ id })
        .then(res => {
          this.partNumObj = res.data
        })
        .catch(err => this.$msg.fail(err))
    },
    //
    handleShowText(key, item) {
      if (item.check && (this.signObj[key] || key === 'aog')) {
        return item.check(this.signObj[key])
      }
      return this.signObj[key] ? this.signObj[key] : ''
    }
  }
}
</script>

<style scoped>
/deep/.el-dialog__header {
  padding: 10px 20px 10px 10px;
}
/deep/.el-dialog__body {
  padding: 0 10px;
}
/deep/.el-dialog {
  margin-top: 8vh !important;
}
/deep/.el-dialog__header {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/.el-collapse-item__header {
  font-weight: bold;
  font-size: 15px;
}
/* 按钮 */
.bottomBtn {
  display: flex;
  justify-content: space-between;
}
.lh {
  line-height: 20px;
}
.content {
  width: 100%;
  height: 65vh;
  overflow-y: scroll;
}
/deep/.el-dialog {
  animation: goRight .6s linear forwards;
}
</style>
